<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>DynamicTp可视化界面</title>
		<link href="layui/css/layui.css" rel="stylesheet" />
	</head>
	<body>
		<ul class="layui-nav layui-bg-cyan">
			<li class="layui-nav-item layui-this"><a href="javascript:;">Dynamic Tp View</a></li>
		</ul>

		<div class="layui-tab" lay-filter="bar">
			<ul class="layui-tab-title">
				<li class="layui-this">端点可视化</li>
				<li>日志可视化</li>
				<li>上传监控文件</li>
			</ul>
			<div class="layui-tab-content">
				<div class="layui-tab-item  layui-show">
					<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
						<legend>端点参数</legend>
					</fieldset>
					<form class="layui-form layui-form-pane" style="margin-top: 20px;" lay-filter="form">
						<div class="layui-form-item">
							<label class="layui-form-label">DTP-URL</label>
							<div class="layui-input-block">
								<input type="text" name="url" class="layui-input"
									value="http://127.0.0.1:8888/dynamic-tp/actuator/dynamic-tp" lay-verify="required">
							</div>
						</div>

						<div class="layui-inline">
							<label class="layui-form-label">线程池名称</label>
							<div class="layui-input-inline">
								<select name="poolName">
									<option value="">选择</option>
								</select>
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">时间间隔</label>
							<div class="layui-input-inline">
								<input type="text" name="time" autocomplete="off" class="layui-input" value="5"
									lay-verify="number">
							</div>
						</div>

						<div class="layui-form-item" style="margin-top: 10px;">
							<div class="layui-input-block">
								<button class="layui-btn clear">清除数据</button>
								<button id="search" class="layui-btn">查询</button>
							</div>
						</div>
					</form>
				</div>
				<div class="layui-tab-item">
					<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
						<legend>日志参数</legend>
					</fieldset>

					<form class="layui-form layui-form-pane" style="margin-top: 20px;" lay-filter="logging-form">
						<div class="layui-form-item">
							<label class="layui-form-label">路径</label>
							<div class="layui-input-block">
								<input type="text" name="path" class="layui-input"
									value="E:\home\logs\dynamictp\application.monitor.log" lay-verify="required">
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">时间区间</label>
							<div class="layui-inline" id="time">
								<div class="layui-input-inline">
									<input type="text" name="startTime" autocomplete="off" id="startTime" class="layui-input" />
								</div>
								<div class="layui-form-mid">-</div>
								<div class="layui-input-inline">
									<input type="text" name="endTime" autocomplete="off" id="endTime" class="layui-input" />
								</div>

							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">线程池名称</label>
							<div class="layui-input-inline">
								<select name="poolName">
									<option value="">选择</option>
								</select>
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">日志数量</label>
							<div class="layui-input-inline">
								<input type="text" name="limit" autocomplete="off" class="layui-input" value="20"
									lay-verify="number">
							</div>
						</div>

						<div class="layui-form-item" style="margin-top: 10px;">
							<div class="layui-input-block">
								<button class="layui-btn clear">清除数据</button>
								<button id="parse" class="layui-btn">解析</button>
							</div>
						</div>
					</form>
				</div>
				<div class="layui-tab-item">
					<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
						<legend>拖拽上传</legend>
					</fieldset>
					<form class="layui-form" lay-filter="logging-file-form">
						<div class="layui-inline">
							<label class="layui-form-label">线程池名称</label>
							<div class="layui-input-block" style="width: 300px;">
								<select name="poolName">
									<option value="">选择</option>
								</select>
							</div>
						</div>
						<div class="layui-inline">
							<button class="layui-btn clear">清除数据</button>
							<button id="change" class="layui-btn">切换</button>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">文件</label>
							<div class="layui-upload-drag" id="uploadFile">
								<i class="layui-icon"></i>
								<p>点击上传，或将文件拖拽到此处</p>
								<div class="layui-hide" id="uploadDemoView">
									<hr>
									<img src="" alt="上传成功" style="max-width: 196px">
								</div>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
		<div id="echart" style="width: 100%; height: 600px;"></div>


	</body>
	<script src="js/data.js"></script>
	<script src="js/echarts.js"></script>
	<script src="layui/layui.js"></script>
	<script src="js/common.js"></script>
	<script type="text/javascript">
		var option = {
			legend: {
				data: []
			},
			xAxis: {
				type: 'category',
				data: []
			},
			yAxis: {
				type: 'value'
			},
			series: [{
				name: "",
				data: [],
				type: 'line',
				smooth: true
			}]
		};

		commonFunction.loadHeader();
		commonFunction.loadSubmit();
		commonFunction.loadEchart("echart", option);
	</script>
</html>
